<template>
	<view class="sharinglaw bgf3f">
		<common-navbar title="大牌律师"></common-navbar>
<!-- 		<u-sticky>
			<view class="bgfff flex align_center jus_content pad_30 border_bottom relative" style="overflow: hidden;">
				<view class="sharinglaw_nav_item">
					<u-icon label="所在地区" size="12" label-pos='left' label-color='#afafaf' label-size='29'
						color="#afafaf" top='3' :name="!showCity ? 'arrow-down-fill' : 'arrow-up-fill'"
						@click="showCity = true, visible = false"></u-icon>
				</view>

				<view class="sharinglaw_nav_item">
					<u-icon label="法律专长" size="12" label-pos='left' label-color='#afafaf' label-size='29'
						color="#afafaf" top='3' :name="!visible ? 'arrow-down-fill' : 'arrow-up-fill'"
						@click="visible = !visible"></u-icon>
				</view>

				<view class="sharinglaw_nav_item">
					<u-icon label="工作年限" size="12" label-pos='left' label-color='#afafaf' label-size='29'
						color="#afafaf" top='3' :name="!showYear ? 'arrow-down-fill' : 'arrow-up-fill'"
						@click="showYear = true, visible = false"></u-icon>
				</view>
			</view>


			<u-picker mode="region" v-model="showCity" :area-code='areaCode' :range="region" title="地区选择"
				@confirm="confirmCity"></u-picker>


			<app-dropDownMenu :list='pointList' :name='dropName' @data='getData' @activeIndex='activeIndex'
				@setVisible='setVisible' :actives='actives' :visible='visible' />


			<u-select v-model="showYear" mode="single-column" :default-value='defaultValue' :list="yearList"
				@confirm="confirmYear"></u-select>
		</u-sticky> -->

		<view>
			<view class="flex column padlr_30 bgfff">
				<scroll-view v-if="lawList.length != 0" style="height: calc(100vh - 0upx);" scroll-y
					refresher-default-style="none" @scrolltolower="onButtomRefresh">
					<view v-for="(item, index) in lawList" :key='index' class="sharinglaw_item"
						@click="toLawDetail(item)">
						<view class="sharinglaw_item_up">
							<u-image :src="item.avatars" width="96" height="96" border-radius="50%"
								class="sharinglaw_item_img" />
							<!-- <image src="../../static/image/icon/mine/3.png" v-else class="sharinglaw_item_img"></image> -->

							<view class="sharinglaw_l_wid">
								<view class="flex align_center">
									<view class="sharinglaw_item_name">{{item.lawyer_name}}</view>
									<view class="sharinglaw_item_tag">执业{{item.year}}年</view>
								</view>

								<view class="e73 size_28 mart_16 u-line-1">{{item.province}} {{item.city}}
									{{item.office_name}}
								</view>
							</view>
						</view>

						<view class="sharinglaw_item_down">
							<view style="width: 96upx;">
								<view class="flex align_center jus_center afa size_26">
									<view class="green_radius"></view>在线
								</view>
							</view>

							<view class="sharinglaw_l_wid afa size_24 u-line-2">擅长：{{item.event}}</view>
						</view>
					</view>
					<u-loadmore :status="status" @loadmore="onButtomRefresh" />
				</scroll-view>
				<view v-else class="default_no">
					<image src="/static/image/icon/empty/15.png" class="empty_img"></image>
					<view class="empty_font">暂无数据</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import dropDownMenu from './components/drop-down-menu/drop-down-menu.vue'
	export default {
		data() {
			return {
				visible: false,
				show: true,
				showCity: false,
				showYear: false,
				dropName: 'name',
				selectValue: '',
				selectId: '',
				event_id: '',
				region: [],
				actives: 0,
				lawList: [],
				pointList: [],
				areaCode: [],
				city: '',
				defaultValue: [0],
				yearList: [{
						value: '1',
						label: '1-3年'
					},
					{
						value: '2',
						label: '3-5年'
					},
					{
						value: '3',
						label: '5-10年'
					},
					{
						value: '4',
						label: '10年以上'
					}
				],
				total: 0,
				page_num: 10, // 每页条数
				page: 1, // 页码
				status: 'loadmore',
			}
		},
		components: {
			'app-dropDownMenu': dropDownMenu
		},
		onReachBottom() {
			console.log('onReachBottom')
		},
		onLoad() {
			this.getEvent()

			this.getAllLawyer()
		},
		methods: {
			toLawDetail(item) {
				this.$u.route(`/pages_lawyer/lawyer_detail/lawyerDetail?id=${item.id}`)
			},
			// 获取案件类型
			async getEvent() {
				const {
					data
				} = await this.$u.get(this.$restUrl.getEvent)
				this.pointList = data || []
			},
			confirmCity(obj) {
				this.city = obj.city.label

				this.areaCode = [obj.province.value, obj.city.value, obj.area.value]

				this.page = 1
				this.lawList = []
				this.status = 'loadmore'
				this.getAllLawyer()
			},
			confirmYear(data) {
				this.selectValue = data[0].label
				this.selectId = data[0].value

				this.yearList.map((item, index) => {
					if (item.value == this.selectId) {
						this.defaultValue = [index]
					}
				})

				this.page = 1
				this.lawList = []
				this.status = 'loadmore'
				this.getAllLawyer()
			},
			setVisible(bol) {
				this.visible = bol
			},
			activeIndex(index) {
				this.actives = index
			},
			getData(data) {
				this.event_id = data.id

				this.page = 1
				this.lawList = []
				this.status = 'loadmore'
				this.getAllLawyer()
			},
			// 律师列表
			async getAllLawyer() {
				const year = this.selectId == '' ? '' : this.selectId == 1 ? '1,2,3' : this.selectId == 2 ?
					'3,4,5' :
					this.selectId == 3 ? '5,6,7,8,9,10' : this.selectId == 4 ? '10,11,12' : ''

				const {
					data
				} = await this.$u.post(this.$restUrl.getAllLawyer, {
					event_id: this.event_id.toString(),
					year,
					city: this.city,
					page_num: this.page_num,
					page: this.page,
				})
				console.log(data)
				this.total = data.total
				this.lawList.push(...data.data)
				this.status = 'loadmore';
			},
			// 底部刷新
			onButtomRefresh() {
				console.log("onButtomRefresh")
				this.status = 'loading';
				if (this.page * this.page_num >= this.total) {
					this.status = 'nomore'
					return
				}
				this.page++
				this.getAllLawyer()
			},
		}
	}
</script>

<style scoped lang="scss">
	@import "./lawyerList.scss";
</style>
